<template>
    <div class="detail">
        <header>
            <div class="header-returns" v-show="isShow">
                <div @click="goBack"><van-icon name="arrow-left" /></div>
                <div><van-icon name="home-o" /></div>
            </div>
            <div 
            class="header-bar" 
            v-show="!isShow"
            :style="styleOption">
                <div @click="goBack"><van-icon name="arrow-left" /></div>
                <div>
                    <span>商品详情</span>
                    <span>商品评价</span>
                </div>
                <div><van-icon name="home-o" /></div>
            </div>
        </header>
        
        <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000">
           <van-swipe-item v-for="(image, index) in images" :key="index">
               <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
       </div >
       <div class="goods-name">
            <div class="goods-price">
           <div class="oprice">
               <span>￥</span>
               <b>59-128</b>
           </div>
           <div class="pprice">
               <span>价格：</span>
               <del>￥188</del>
           </div>
       </div>
           <h1>折叠书桌出租房高中学生简约写字学习桌</h1>
           <div>精心打磨，拒绝尖角碰伤，保护家人安全</div>
       </div>
       <div class="product">商品详情</div>
      <div class="goods">
         <img src="/images/goods.jpg" alt="">
         <img src="/images/goods1.jpg" alt="">
         <img src="/images/goods2.jpg" alt="">
         <img src="/images/goods3.jpg" alt="">
      </div>
        <footer>
            
                <div class="add-cart" @click="messageAlert">加入购物车</div>
                <div>立即购买</div>
            
            
        </footer>
    </div>
</template>
<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import { Toast } from 'vant';
import { Icon } from 'vant';

Vue.use(Toast);
Vue.use(Icon);

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data() {
    return {
        styleOption:{},
        isShow:true,
      images: [
          './images/swipe1.jpg',
          './images/swipe2.jpg',
          './images/swipe3.jpg',
        
      ],
      

    };
  },
  mounted() {
  	// 监听页面滚动事件
    window.addEventListener("scroll", this.showHeader)
  },
  methods: {
      messageAlert(){
          Toast('添加成功，请在购物车内查看~');
      },
      goBack(){
           this.$router.back()
       },
    //头部fixed定位
    showHeader() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //   console.log(scrollTop)
    let opacity=scrollTop/300;
    opacity=opacity > 1 ? 1 :opacity;
    this.styleOption={
        opacity:opacity
    }
      if (scrollTop>=50) {   
        this.isShow = false;
      }else {
        this.isShow = true;
      }
    },
  },

}
</script>
<style scoped lang='scss'>
.detail{
    background-color: rgb(224, 224, 224);
    height: 1500px;
}
footer{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 49px;
    // border-top:2px solid rgb(134, 157, 71) ;
    background-color:#fff ;
    border:1px solid rgb(255, 157, 0) ;
    div{
        
        width: 50%;
        line-height: 49px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        background-color: rgb(249, 178, 63);
        background-size:cover ;
        
        &.add-cart{
        background-color: seagreen;
    }
    }
    
 
}
.swipe{
  
    margin: 0 auto;
   
}
  .my-swipe .van-swipe-item {
   width: 100%;
   height: 450px;
  }
  .my-swipe .van-swipe-item img{
      width: 100%;
      height: 450px;
    //   border-radius: 15px;
   
  }
  .goods-name{
      margin-top: 8px;
      background-color: rgb(255, 255, 255);
      border-radius: 12px;
      padding: 5px 5px;
      
      h1{
          font-size: 18px;
          font-weight: 600;
      }
      div{
          padding: 3px 0;
          font-size: 14px;
          color: rgb(164, 162, 141);
      }
  }
  .goods-price{
      padding: 5px 5px;
      .oprice{
          color: rgb(255, 94, 0);
              font-size: 20px;
          

      }
      .pprice{
          color: #999999;

      }
  }
  header{
      position: fixed;
      left: 0;
      top:0;
      width: 100%;
      height: 44px;
      z-index: 999;
      .header-returns{
          width: 100%;
           height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .van-icon{
             padding:10px;
              color: rgb(255, 255, 255);
              background-color: rgba(0,0,0,0.3);
              border-radius:50% ;
              font-size: 20px;

          }
      }
      .header-bar{
           width: 100%;
           height: 44px;
          background: white;
           display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          span{
              padding: 0 10px;
          }
          i{
              padding: 0 10px;
              font-size: 20px;
          }

      }

  }
.goods {
 margin-top: 5px;
 

 img{
      width: 100%;
       
  }
}
.product{
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #717171;
}
</style>